<template>
    <view v-if="commidtyDetail.length !== 0">
        <!-- 轮播开始 -->
		<view class="banner">
			<swiper class="swiper" @change="changeSwiper" autoplay>
				<block v-for="(item, index) in swiperImg" :key="index">
                    <swiper-item>
                        <img :src="item" alt="" style="width:100%;height:100%">
                    </swiper-item>
                </block>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperImg.length" :key="item">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>
		<!-- 轮播结束 -->

        <!-- 商品信息开始 -->
        <view class="commodity-info">
            <view class="commodity-info-left">
                <view class="commodity-name">{{commidtyDetail.spu_name}}</view>
                <view class="commodity-price">
                    <text class="commodity-price-new">￥{{commidtyDetail.activity_price}}</text>
                    <text class="commodity-price-old">￥{{commidtyDetail.price}}</text>
                </view>
                <view class="commodity-post">邮费：{{commidtyDetail.postage}}</view>
            </view>
            <view class="commodity-info-right">
                <!-- <view class="iconfont icon-icon-" style="margin-left:110rpx;color:#999;font-size:33rpx;margin-top:48rpx"></view> -->
                <!-- <view class="commodity-info-share">分享</view> -->
                <view class="commodity-info-num">总销量：{{commidtyDetail.sales_volume}}笔</view>
            </view>
        </view>
        <!-- 商品信息结束 -->
        
        <!-- 参与拼团区开始 -->
        <view class="join-group">
            <view class="join-group-title">已有{{commidtyDetail.sales_volume}}人参与拼团</view>
            <block v-for="(item, index) in groupList" :key="index">
                <view class="group-item">
                    <view class="group-headImg">
                        <block v-for="(item1, index1) in item.users" :key="index1">
                            <img :src="item1.avatar_url ? item1.avatar_url : img_base_url + '/touxiang.png'" alt="" style="width:75rpx;height:75rpx">
                        </block>
                    </view>
                    <view style="margin-left:27rpx">
                        <view class="group-text">还差<text style="color:#FF1E1E">{{item.total_number - item.join_number}}人</text>成团</view>
                        <view>
                            <text style="color:#999;font-size:24rpx">剩余</text>
                            <uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" :reset="reset" color="#fff" background-color="#24C79C" splitor-color="#fff" @timeup="timeUp"></uni-countdown>
                        </view>
                    </view>
                    <view class="go-join-group" @tap="goJoinGroup(item)">去参团</view>
                </view>
            </block>
        </view>
        <!-- 参与拼团区结束 -->

        <!-- 评论区开始 -->
        <view class="comment"> 
            <view class="comment-header">
                <!-- <view class="header-mark"></view> -->
                <view class="header-title">评论（{{commidtyDetail.comment_count}}）</view>
                <view class="header-more" @tap="lookMore">查看更多></view>
            </view>
            <block v-for="(item, index) in commidtyDetail.comment" :key="index">
                <view class="comment-item">
                    <view class="head-portrait">
                        <img :src="item.customer.avatar_url" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="comment-info">
                        <view class="comment-person">
                            <text style="color:#333333;font-size:30rpx">{{item.customer.nick_name}}</text>
                            <text style="color:#999999;font-size:24rpx;margin-left:30rpx">{{item.created_at}}</text>
                        </view>
                        <view class="comment-text">{{item.content}}</view>
                        <view class="comment-photo-box">
                            <block v-for="(item1, index1) in item.images" :key="index1">
                                <view class="comment-photo">
                                    <img :src="item1" alt="" style="width:100%;height:100%">
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <!-- 评论区结束 -->

        <!-- 店铺开始 -->
        <view class="store">
            <view class="store-portrait">
                <img :src="img_base_url + '/icon.png'" alt="" style="width:100%;height:100%">
            </view>
            <view class="store-info">
                <view class="store-name">农乎自营旗舰店</view>
                <view class="store-text">店铺经营旅游景点农产品</view>
                <view class="store-commodity">全部商品<text style="color:#333333;font-size:34rpx;margin-left:32rpx">4</text></view>
                <view class="call-merchant iconfont icon-dianhua"><text style="color:#999;margin-left:10rpx;font-size:24rpx" @tap="makePhoneCall">联系供应商</text></view>
            </view>
        </view>
        <!-- 店铺结束 -->

        <!-- 商品详情开始 -->
        <view class="detail">
            <view class="detail-title">详情</view>
            <!-- <view class="detail-img"></view> -->
            <view class="detail-text">
                <rich-text :nodes="commidtyDetail.details"></rich-text>
            </view>
        </view>
        <!-- 商品详情结束 -->

        <!-- 推荐开始 -->
        <view class="recommend">
            <view class="recommend-title">推荐</view>
            <view class="recommend-list">
                <block v-for="(item, index) in commidtyDetail.recommend" :key="index">
                    <view class="recommend-item">
                        <view class="recommend-item-img">
                            <img :src="item.commodity_image_thum" alt="" style="width:100%;height:100%">
                        </view>
                        <view class="recommend-item-info">
                            <text style="color:#333333;font-size:24rpx">{{item.spu_name}}</text>
                            <text style="color:#FF1E1E;font-size:24rpx;">￥{{item.activity_price}}</text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <!-- 推荐结束 -->

        <!-- 立即购买开始 -->
        <view class="bottom">
            <view class="go-store" @tap="goStore">
                <!-- <view style="width:54rpx;height:48rpx;font-size:60rpx;color:#24C79C" class="iconfont icon-shangdian"></view>
                <view style="margin-top:12rpx">进店逛逛</view> -->
            </view>
            <view class="add-cart" v-if="commidtyDetail.commodity_type == 0">
                <view style="width:54rpx;height:48rpx;font-size:60rpx;color:#24C79C" class="iconfont icon-gouwuche"></view>
                <view style="margin-top:12rpx">加入购物车</view>
            </view>
            <view class="buying-box">
                <view class="buying-box-left" @tap="buyingNow">单独购买</view>
                <view class="buying-box-right" @tap="groupBuyNow">立即拼团</view>
            </view>
        </view>
        <!-- 立即购买结束 -->

        <!-- 立即购买弹出框开始 -->
        <view class="buying-dialog" v-show="isShow">
            <view class="mark"></view>
            <view class="iconfont icon-close_icon" style="position:fixed;bottom:560rpx;right:42rpx;z-index:9999;color:#fff;font-size:60rpx" @tap="closeBuyingDialog"></view>
            <view class="content">
                <view class="buying-top">
                    <view class="buying-info">
                        <view class="buying-info-img">
                            <img :src="commidtyDetail.commodity_image_thum" alt="" style="width:100%;height:100%">
                        </view>
                        <view style="width:70%;margin-left:37rpx">
                            <view class="buying-info-price">￥{{totalPrice}}</view>
                            <view class="buying-info-name">
                                <view>{{commidtyDetail.spu_name}}</view>
                                <!-- <view>/{{commidtyDetail.CommodityUnit}}</view> -->
                            </view>
                        </view>
                    </view>
                    <view class="buying-standards">
                        <view style="color:#999999;font-size:28rpx;margin-left:13rpx;">选择规格</view>
                        <view :class="showChoose == false ? 'choose-standards' : 'choose-standards-show'" @tap="showChooseBox">{{choosedStandard}}↓</view>
                        <view class="standards-box" v-show="showChoose">
                            <scroll-view style="height:104rpx" scroll-y>
                                <block v-for="(item, index) in chooseList" :key="index">
                                    <view :class="item.id == choosedStandardId ? 'standards-box-item-active standards-box-item' : 'standards-box-item'" @tap="chooseStandards(item)">{{item.sku_name}}</view>
                                </block>
                            </scroll-view>
                        </view>
                    </view>
                    <view class="buying-num">
                        <view style="color:#999999;font-size:28rpx;margin-left:13rpx;">选择数量</view>
                        <view class="choose-num">
                            <view class="choose-num-reduce" @tap="reduceNum">
                                <img src="../../static/-.png" alt="" style="width:100%;height:100%">
                            </view>
                            <view class="choose-num-total">{{commidtyNum}}</view>
                            <view class="choose-num-add" @tap="addNum">
                                <img src="../../static/+.png" alt="" style="width:100%;height:100%">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="buying-bottom" v-if="type == 1">
                    <view class="buying-bottom-button" @tap="goConfirmOrder">立即购买</view>
                </view>
                <view class="buying-bottom" v-if="type == 2">
                    <view class="buying-bottom-button" @tap="addCartNow">立即添加</view>
                </view>
                <view class="buying-bottom" v-if="type == 3">
                    <view class="buying-bottom-button" @tap="goConfirmOrder" v-if="groupType == 1">立即开团</view>
                    <view class="buying-bottom-button" @tap="goConfirmOrder" v-if="groupType == 2">立即参团</view>
                </view>
            </view>
        </view>
        <!-- <buying-now></buying-now> -->
    </view>
</template>

<script>
// import buyingNow from '../../components/buying-now/buying-now'
import { CommidtyModel } from '../../model/commidty'
import { OrderModel } from '../../model/order'
import { config } from '../../common/utils/congfig'
import uniCountdown  from "../../components/linnian-CountDown/uni-countdown" 
const commidtyModel = new CommidtyModel()
const orderModel = new OrderModel()
export default {
    components: {
        // buyingNow
        uniCountdown
    },
    data() {
        return {
            img_base_url: config.img_base_url,
            swiperImg: [],
            current: 0,
            swiperCurrent: 0,
            isShow: false,
            groupCommidtyId: '',
            commidtyDetail: [],
            showChoose: false, // 控制是否显示选择规格盒子
            chooseList: [], // 规格列表
            choosedStandard: '', // 选中的规格的名字
            choosedStandardId: '', // 选中的规格的Id
            choosedStandardPrice: '', // 选中的规格的价格
            commidtyNum: 1,
            type: 0,
            groupList: [],
            reset: false,
            groupType: 0, //拼团类型  1、开团  2、参团
            groupId: '', //拼团的ID
        }
    },
    methods: {
        // 初始化商品信息
        initCommidtyInfo() {
            this.choosedStandard = this.chooseList[0].sku_name
            this.choosedStandardId = this.chooseList[0].id
            this.choosedStandardPrice = this.chooseList[0].activity_price
            this.commidtyNum = 1
        },
        changeSwiper(e) {
            this.swiperCurrent = e.detail.current;
        },
        buyingNow() {
            const loginRes = this.checkLogin('/pagesA/group-commidty-detail/group-commidty-detail', '1')
            if(loginRes) {
                this.initCommidtyInfo()
                this.isShow = true
                this.type = 1
            }
        },
        closeBuyingDialog() {
            this.isShow = false
        },
        lookMore() {
            uni.navigateTo({
                url: '/pagesD/assessment-more/assessment-more'
            })
        },
        goStore() {
            uni.navigateTo({
                url: '/pagesA/store/store'
            })
        },
        goConfirmOrder() {
            uni.navigateTo({
                url: '/pagesC/confirm-order/confirm-order?commidtyDetail=' + JSON.stringify(this.commidtyDetail) + '&commidtyNum=' + this.commidtyNum + '&sku_id=' + this.choosedStandardId + '&type=' + this.type + '&groupType=' + this.groupType + '&groupId=' + this.groupId + '&price=' + this.totalPrice
            })
        },
        // 获取拼团商品信息
        getGroupCommidtyDetail() {
            let data = {
                spu_id: this.groupCommidtyId
            }
            commidtyModel.getCommidtyDetail(data).then((res) => {
                if(res.code == 200) {
                    this.commidtyDetail = res.data
                    this.commidtyDetail.details = ''
                    console.log(this.commidtyDetail)
                    this.chooseList = res.data.sku
                    this.swiperImg = res.data.commodity_image
                    this.initCommidtyInfo()
                }
            })
        },
        // 立即拼团
        groupBuyNow() {
            const loginRes = this.checkLogin('/pagesA/group-commidty-detail/group-commidty-detail', '1')
            if(loginRes) {
                this.isShow = true
                this.type = 3
                this.groupType = 1
            }
        },
        // 去参团
        goJoinGroup(item) {
            const loginRes = this.checkLogin('/pagesA/group-commidty-detail/group-commidty-detail', '1')
            if(loginRes) {
                this.isShow = true
                this.type = 3
                this.groupType = 2
                console.log(item)
                if(this.groupType = 2) {
                    this.groupId = item.id
                }
            }
        },
        reduceNum() {
            // let a = this.commidtyNum
            if(this.commidtyNum > 1) {
                this.commidtyNum = this.commidtyNum - 1
            }else {
                uni.showToast({
                    title: '至少购买一件商品',
                    icon: 'none'
                })
            }
        },
        addNum() {
            this.commidtyNum = this.commidtyNum + 1
        },
        showChooseBox() {
            this.showChoose == false ? this.showChoose = true : this.showChoose = false
        },
        chooseStandards(item) {
            console.log(item)
            this.choosedStandard = item.sku_name
            this.choosedStandardId = item.id
            this.choosedStandardPrice = item.activity_price
            this.showChoose = false
        },
        // 获取该商品的拼团列表信息
        _getCommidtyGroupList(id) {
            commidtyModel.getCommidtyGroupList(id).then((res) => {
                if(res.code == 200) {
                    this.groupList = res.data
                    this.groupList.map((item) => {
                        if(new Date(item.failure_time).getTime() > new Date().getTime()) {
                            let dateInterval = (new Date(item.failure_time).getTime() - new Date().getTime())/1000
                            item.hour = Math.floor((dateInterval / 3600) % 24)
                            item.minute = Math.floor((dateInterval / 60) % 60)
                            item.second = Math.floor(dateInterval % 60)
                        }
                    })
                    console.log(this.groupList)
                }
            })
        },
        makePhoneCall() {
            uni.makePhoneCall({
                phoneNumber: '19136141045'
            })
        }
    },
    computed: {
        totalPrice() {
            return this.choosedStandardPrice * this.commidtyNum
        }
    },
    onLoad(option) {
        this.reset = false
        this.groupCommidtyId = option.commidtyId
        this.getGroupCommidtyDetail()
        this._getCommidtyGroupList(this.groupCommidtyId)
    }
}
</script>

<style>
    .uni-countdown__number {
        border: none !important;
        color: #999999 !important;
        background: #FFFFFF !important;
        padding: 0rpx !important;
    }
    .uni-countdown__splitor {
        color: #999999 !important;
        padding: 0rpx !important;
        line-height: 40rpx !important;
    }
    .banner {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.banner img {
		width: 100%;
		height: 100%;
	}
	.swiper {
        width: 100%;
        height: 432rpx;
        overflow: hidden;
        position: relative;
    }
	.dots {
        position: absolute;
        bottom: 20rpx;
        right: 63rpx;       
        z-index: 99;
        display: flex;
        flex-direction: row;
        justify-content: center      
    }
	.dot {
        width: 10rpx;
        height: 9rpx;
        transition: all .6s;
        background:rgba(255,255,255,1);
        margin-right: 10rpx;
		border-radius: 50%;
    }
	.active {
        width: 24rpx;
        height: 9rpx;
        background:rgba(255,255,255,1);
		border-radius: 4rpx;
    }
    .commodity-info {
        height: 202rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0 51rpx 0 43rpx;
    }
    .commodity-name {
        color: #333333;
        font-size: 38rpx;
        font-weight: 500;
        margin-top: 25rpx;
    }
    .commodity-price {
        margin-top: 15rpx;
    }
    .commodity-price-new {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: bold;
    }
    .commodity-price-old{
        color: #999999;
        font-size: 22rpx;
        font-weight: 500;
        text-decoration: line-through;
        margin-left: 28rpx;
    }
    .commodity-post {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        margin-top: 10rpx;
    }
    .commodity-info-share {
        text-align: right;
        font-size: 22rpx;
        color: #999999;
    }
    .commodity-info-num {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        padding-top: 30rpx;
    }
    .join-group {
        background: #ffffff;
        margin-top: 22rpx;
        padding: 29rpx 50rpx 30rpx 38rpx;
    }
    .join-group-title {
        color: #333333;
        font-size: 28rpx;
    }
    .join-group-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .group-item {
        position: relative;
        display: flex;
        justify-content: left;
        margin-top: 35rpx;
    }
    .group-headImg {
        position: relative;
    }
    .group-headImg img {
        position: relative;
        left: -20rpx;
    }
    .group-headImg img:first-child {
        left: 0rpx;
    }
    .group-text {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500
    }
    .go-join-group {
        position: absolute;
        right: 0rpx;
        top: 10rpx;
        width: 146rpx;
        height: 61rpx;
        background: rgba(36,199,156,1);
        border-radius: 31rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight: 500;
        text-align: center;
        line-height: 60rpx;
    }
    .comment {
        background: #ffffff;
        margin-top: 22rpx;
        padding-top: 35rpx;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        margin-left: 40rpx;
    }
    .header-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;

    }
    .header-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .header-more {
        color: #666666;
        font-size: 24rpx;
        font-weight: 500;
        margin-right: 39rpx;
        line-height: 50rpx;
    }
    .comment-item {
        padding: 43rpx 0 30rpx 42rpx;
        border-bottom: 1rpx solid #F5F5F5;
        display: flex;
        justify-content: left;
    }
    .comment-info {
        width: 473rpx;
        margin-left: 30rpx;
    }
    .head-portrait {
        width: 57rpx;
        height: 57rpx;
        border: 1rpx solid #ccc;
    }
    .comment-person {
        margin-top: 20rpx;
    }
    .comment-text {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 40rpx;
    }
    .comment-photo {
        width: 124rpx;
        height: 124rpx;
        border: 1rpx solid #ccc;
        margin-top: 27rpx;
        border-radius:10rpx;
    }
    .store {
        position: relative;
        margin-top: 22rpx;
        padding: 23rpx 52rpx 30rpx 43rpx;
        background: #ffffff;
        display: flex;
        justify-content: left;
    }
    .store-portrait {
        width: 60rpx;
        height: 60rpx;
    }
    .store-info {
        margin-left: 24rpx;
    }
    .store-name {
        color:#333333;
        font-size:36rpx;
        margin-top: 12rpx;
    }
    .store-text {
        width: 369rpx;
        color: #999999;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 21rpx;
    }
    .store-commodity {
        color: #999999;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 63rpx;
    }
    .call-merchant {
        position: absolute;
        bottom: 30rpx;
        right: 52rpx;
        width: 187rpx;
        height: 53rpx;
        border:1rpx solid rgba(230,230,230,1);
        border-radius:10rpx;
        color: #24C79C;
        font-size: 30rpx;
        line-height: 53rpx;
        padding-left: 15rpx;
    }
    .detail {
        margin-top: 22rpx;
        background: #ffffff;
        padding: 35rpx 38rpx 40rpx 38rpx;
    }
    .detail-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
    }
    .detail-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .detail-img {
        width: 673rpx;
        height: 410rpx;
        border-radius: 10rpx;
        margin-top: 25rpx;
        border: 1rpx solid #ccc;
    }
    .detail-text {
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
        text-indent: 35rpx;
        line-height: 40rpx;
        margin-top: 30rpx;
    }
    .recommend {
        margin-top: 22rpx;
        background: #ffffff;
        padding: 38rpx;
        margin-bottom: 200rpx;
    }
    .recommend-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
    }
    .recommend-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .recommend-list {
        display: flex;
        justify-content: space-between;
        margin-top: 23rpx;
    }
    .recommend-item {
        width: 215rpx;
        height: 310rpx;
        background:rgba(255,255,255,1);
        border: 1rpx solid rgba(230,230,230,1);
        border-radius: 5rpx;
    }
    .recommend-item-img {
        width: 215rpx;
        height: 229rpx;
    }
    .recommend-item-info {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;
        padding: 0 24rpx 0 11rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 90%;
        height: 140rpx;
        padding: 0 38rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .buying-box {
        width: 410rpx;
        height: 84rpx;
        display: flex;
        justify-content: space-between;
    }
    .buying-box-left {
        width: 50%;
        height: 100%;
        background: #FFFFFF;
        color: #24C79C;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
        border-top-left-radius: 42rpx;
        border-bottom-left-radius: 42rpx;
        box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(56,56,56,0.08);
    }
    .buying-box-right {
        width: 50%;
        height: 100%;
        background:rgba(36,199,156,1);
        color: #FFFFFF;
        font-size: 30rpx;
        font-weight: bold;
        line-height: 84rpx;
        text-align: center;
        border-top-right-radius: 42rpx;
        border-bottom-right-radius: 42rpx;
        box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(56,56,56,0.08);
    }
    .go-store,
    .add-cart {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #999999;
        font-size: 24rpx;
        height: 100rpx;
    }
    .buying-dialog {
        z-index: 999;
    }
    .mark {
        position: fixed;
        top: 0rpx;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        background:rgba(0,0,0,1);
        opacity:0.3;
    }
    .content {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 543rpx;
        background: #ffffff;
        opacity: 1
    }
    .buying-top {
        /* width: 100%; */
        height: 261rpx;
        padding: 10rpx 44rpx 43rpx 38rpx;
    }
    .buying-info {
        display: flex;
        justify-content: left;
    }
    .buying-info-img {
        width: 175rpx;
        height: 167rpx;
    }
    .buying-info-price {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: 500;
        margin-top: 48rpx;
    }
    .buying-info-name {
        color: #333333;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
    }
    .buying-num,
    .buying-standards {
        display: flex;
        justify-content: space-between;
        margin-top: 50rpx;
    }
    .choose-standards {
        width: 192rpx;
        height: 52rpx;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        background: #F4F4F4;
        border-radius: 26rpx;
    }
    .choose-standards-show {
        width: 192rpx;
        height: 52rpx;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        background: #F4F4F4;
        border-radius: 26rpx;
        border-bottom-left-radius: 0rpx;
        border-bottom-right-radius: 0rpx;
    }
    .standards-box {
        position: fixed;
        bottom: 156rpx;
        right: 44rpx;
        width: 192rpx;
        height: 104rpx;
        z-index: 100;
    }
    .standards-box-item {
        width: 192rpx;
        height: 52rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        font-size: 28rpx;
        background: #F4F4F4;
    }
    .standards-box-item-active {
        background: #24C79C;
        color: #ffffff;
    }
    .choose-num {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
    }
    .choose-num-reduce,
    .choose-num-add {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background:#F4F4F4;
        text-align: center;
        line-height: 38rpx;
        color: #C8C8C8;
        font-size: 40rpx;
    }
    .choose-num-total {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        padding: 0 30rpx;
    }
    .buying-bottom {
        position: absolute;
        bottom: 0rpx;
        left: 0rpx;
        width: 100%;
        height: 140rpx;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    .buying-bottom-button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto;
        font-size: 30rpx;
        font-weight: bold;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 84rpx;
    }
    
</style>